<template>
  <div class="signIn">
    <div class="signIn_header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="arrow-up"></div>
      <Calendar
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
        v-on:isToday="clickToday"
        ref="Calendar"
      ></Calendar>
    </div>
  </div>
</template>
<script>
import Calendar from "vue-calendar-component";
import topBar from "@/components/topBar";
import { getSinging, singingdeWK } from "../../api.js";
import { getGuid } from "../../utils/index";

export default {
  name: "signIn",
  data() {
    return {
      // arr: [
      //   { date: "2018/4/1", className: "mark1" },
      //   { date: "2018/4/13", className: "mark2" }
      // ],

      barObj: {
        isBack: true,
        backVal: "我",
        title: "签到挖矿",
        isIcon: true
      }
    };
  },
  mounted() {
    this.singingde();
    this.singingList();
  },
  components: {
    Calendar,
    topBar
  },
  methods: {
    singingde() {
      let id = localStorage.zyUserId;
      singingdeWK({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        console.log(res);
      });
    },

    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    }
  }
};
</script>
<style lang="stylus" scoped>
.signIn {
  .signIn_header {
    height: 1.98rem;
    padding-top: 0.52rem;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    width: 7.1rem;
    margin: 0 auto;
    position: relative;
    top: -25px;
    background: #FFF;
    border-radius: 0.2rem;

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 8px solid #fff;
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>

<style >
.content .wh_content_item,
.content .wh_content_item_tag {
  font-size: 15px;
  width: 13.4%;
  text-align: center;
  color: #000 !important;
  position: relative;
}
.content .wh_top_changge li {
  color: #000 !important;
}
.content .wh_top_changge li {
  color: #000 !important;
}
.content .wh_content_all {
  background: #fff !important;
}
.content .wh_jiantou1 {
  width: 12px;
  height: 12px;
  border-top: 2px solid #000 !important;
  border-left: 2px solid #000 !important;
  transform: rotate(-45deg);
}

.content .wh_jiantou2 {
  width: 12px;
  height: 12px;
  border-top: 2px solid #000 !important;
  border-right: 2px solid #000 !important;
  transform: rotate(45deg);
}

.content .wh_content_all {
  border-radius: 20px !important;
}
.content .wh_content_item .wh_isToday {
  background: linear-gradient(
    -17deg,
    rgba(236, 95, 42, 1),
    rgba(239, 147, 54, 1)
  ) !important;
  color: #fff;
}
.content .wh_content_item .wh_chose_day {
  background: linear-gradient(
    -45deg,
    rgba(128, 213, 74, 1),
    rgba(92, 187, 21, 1),
    rgba(171, 225, 76, 1)
  ) !important;
  color: #fff;
}
.content .wh_item_date {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
